<template>
    <div v-bind:class="{mgb2:mgClass}" class="mui-content orderDetail mui-scroll-wrapper">
        <div class="mui-scroll">
            <!--订单状态-->
            <ul class="mui-table-view orderStatus mgb1 mgt1">
                <li class="mui-table-view-cell">
                    <p class="text1 unconfirmed">{{order.orderStatus | orderStatusFilter}}</p>
                    <p class="text3" v-if="order.orderStatus==1">钣喷订单已提交，请等待平台审核。</p>
                    <p class="text3" v-if="order.orderStatus==2">审核已通过，服务人员将在2个工作日内与您联系，请保持联系电话畅通。</p>
                </li>
            </ul>
            <!--车辆信息-->
            <div class="slwy-panel orderCarInfo">
                <div class="panel-content">
                    <div class="panel-title">车辆信息</div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell text3">
                            <p class="col-6  text3">{{order.carPlateNumber}}</p>
                            <p class="col-6 mui-text-right  text3">{{order.carBrand}}{{order.carModel}}</p>
                        </li>
                        <li class="mui-table-view-cell">
                            <p class="col-6 text3">
                                <span>{{order.carBuyPrice}}</span>
                            </p>
                            <p class="col-6 mui-text-right text3">
                                <span>购买于{{order.carBuyDate}}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!--联系人-->
            <div class="slwy-panel orderContacts">
                <div class="panel-content">
                    <div class="panel-title">预约信息</div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell text3">
                            <p class="col-6 text3">{{order.orderContact}}</p>
                            <p class="col-6 mui-text-right">
                                <i class="mui-icon mui-icon-phone-filled text3"></i>
                                <span class="text3">{{order.orderContactPhone}}</span>
                            </p>
                        </li>
                        <li class="mui-table-view-cell text3" v-if="order.orderAppointTime != null">
                            <p class="col-6 text3">预约时间</p>
                            <p class="col-6 mui-text-right">
                                <i class="text3"></i>
                                <span class="text3">{{order.orderAppointTime}}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!--维修信息-->
            <div class="slwy-panel repairInfo">
                <div class="panel-content">
                    <div class="panel-title">维修信息</div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell text3">{{order.enterpriseName}}</li>
                        <!-- 地图导航按钮START -->
                        <li class="mui-table-view-cell addressWrap">
                            <div class="addressLeft">
                                <p class="text3-size color2 enterpriseAddress">{{order.enterpriseAddress}}</p>
                            </div>
                            <div class="addressRight">
                                <a href="javascript:;" @click="handleClickNavi()" class="color3 text1-size">
                                    <i class="mui-icon mui-icon-location color3 text6-size"></i>
                                </a>
                            </div>
                        </li>
                        <!-- 地图导航按钮END -->
                        <!-- 维修厂电话START -->
                        <li class="mui-table-view-cell telWrap">
                            <div class="telLeft">
                                <a class="text3-size color2 enterpriseTel" href="tel:{{order.enterpriseTel}}">{{order.enterpriseTel}}</a>
                            </div>
                            <div class="telRight">
                                <a href="tel:{{order.enterpriseTel}}" class="color3 text1-size">
                                    <i class="mui-icon mui-icon-phone color3 text6-size"></i>
                                </a>
                            </div>
                        </li>
                        <!-- 维修厂电话END -->
                        <li class="mui-table-view-cell text3">{{order.orderGoods}}</li>
                        <li class="mui-table-view-cell text3">
                            <p class="col-6 text3">
                                <span>预估报价:</span>
                                <span class="price">{{order.orderTotalAmount | currency '￥' 2}}</span>
                            </p>
                            <p class="col-6 mui-text-right" style="display:none">
                                <span class="text3">应付:</span>
                                <span class="price">￥</span><span class="price">300.00</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!--订单信息-->
            <div class="slwy-panel repairInfo">
                <div class="panel-content">
                    <div class="panel-title">订单信息</div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell text3">
                            <span>订单编号：</span>
                            <span>{{order.orderCode}}</span>
                        </li>
                        <li class="mui-table-view-cell text3">
                            <span>生成时间：</span>
                            <span>{{order.orderCreateTime}}</span>
                        </li>
                        <li v-if="order.orderConfirmTime != null" class="mui-table-view-cell text3">
                            <span>确认时间：</span>
                            <span>{{order.orderConfirmTime}}</span>
                        </li>
                        <li v-if="order.orderCancelTime != null" class="mui-table-view-cell text3">
                            <span>取消时间：</span>
                            <span>{{order.orderCancelTime}}</span>
                        </li>
                        <li v-if="order.orderSignTime != null" class="mui-table-view-cell text3">
                            <span>竣工时间：</span>
                            <span>{{order.orderSignTime}}</span>
                        </li>
                        <li v-if="order.orderCommentTime != null" class="mui-table-view-cell text3">
                            <span>评价时间：</span>
                            <span>{{order.orderCommentTime}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--确认服务按钮-->
    <div class="fixedOperate" v-if="order.orderStatus < 3">
        <button class="mui-btn mui-btn-primary" v-link="{name:'orderCancel',params:{id:order.orderCode}}">取消订单</button>
    </div>
    <div class="fixedOperate" v-if="order.orderStatus == 4">
        <button class="mui-btn mui-btn-primary" @click="doComment(order.id,order.enterpriseName)">服务评价</button>
    </div>
</template>
<style>
    /*订单状态*/
    .orderDetail .unconfirmed{color: #ff6600; font-weight: bold;}
    .addressWrap,.telWrap{display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center;}
    .addressWrap .addressRight , .telWrap .telRight{width: 1.2rem; text-align: center; border-left: 1px solid #DDD8CE; color: #06c1ae;}
    .addressWrap .addressRight p{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
</style>
<script type="text/ecmascript-6">
		import '../../fonts/mui.css';
        import Page from '../../base/Page';
        import { API } from '../../config/constants';
        import wechat from '../../libs/wechat'
        export default new Page({
            data(){
                return{
                    order:{},
                    mgClass:true,
                }
            },
            methods:{
                doComment:function (id,commentObject) {
                    var data = {objectId:id,commentObject:commentObject,commentType:1};
                    var param = JSON.stringify(data);
                    this.$route.router.go('/comment/create?param=' + encodeURI(param));
                },
                handleClickNavi:function(){
                    if (!this.order.enterpriseGps) {
                        alert('无地址')
                    } else {
                        var coor = this.order.enterpriseGps.split(',');
                        wechat.openLocation({
                            latitude: parseFloat(coor[0]),
                            longitude: parseFloat(coor[1]),
                            scale: 15,
                            name: this.order.enterpriseName,
                            address: this.order.enterpriseAddress
                        });
                    }
                }
            },
            ready () {
                this.getJSON(API.GET_ORDER_DETAIL, {id:this.$route.params.id}, res => {
                    this.order = res.resultData
                    //通过订单状态判定，动态给mui-content添加mgb2
                    if(this.order.orderStatus==3||this.order.orderStatus==5||this.order.orderStatus==6){
                        this.mgClass=false;
                    }else{
                        this.mgClass=true;
                    }
                });
                mui('.mui-scroll-wrapper').scroll({
                    indicators: true, //是否显示滚动条
                    deceleration : 0.0005,
                });
            },
            components:{
            }
    });

</script>